<template>
  <el-scrollbar>
    <div id="collegeCompare" class="main">
      <div class="df" style="justify-content: space-between">
        <div class="comopare-title df f20">
          <div class="title-bar"></div>
          院校对比
        </div>
      </div>
      <div class="college-compared-container">
        <div style="position: relative">
          <table
            class="first-table"
            style="table-layout: fixed; width: 100%; border-collapse: collapse"
          >
            <thead>
              <tr>
                <td style="width: 136px">成绩信息</td>
                <td style="border-right: 0">
                  {{ userInfo.province }} {{ userInfo.course }}
                  {{ userInfo.score }} {{ userInfo.batch }}
                </td>
              </tr>
            </thead>
            <tbody>
              <tr style="position: relative">
                <td style="border-right: 1px solid #e4e4e4">
                  <div class="text">学校名称</div>
                </td>
                <td
                  v-for="(item, i) in compareList"
                  :key="item.code"
                  class="td-item-top"
                >
                  <div v-if="!!item.cnName">
                    <img style="width: 50px" :src="item.logoUrl" alt="" />
                    <div>{{ item.cnName }}</div>
                    <div class="del" @click="deleteItem(item.code)">
                      <el-icon
                        ><Close color="#ff7d00" style="font-size: 12px"
                      /></el-icon>
                    </div>
                  </div>
                  <div v-else>
                    <el-button
                      v-if="!item.isSearch"
                      :icon="Plus"
                      link
                      @click="handleAddCollege(i)"
                      >添加院校</el-button
                    >
                    <el-input
                      v-else
                      v-model="item.searchKey"
                      size="large"
                      placeholder="搜索院校"
                      :prefix-icon="Search"
                      @input="searchKeyInput(item.searchKey, i)"
                      @focus="isShowSearchPop = true"
                      @blur="isShowSearchPop = false"
                    />
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <div
            v-show="isShowSearchPop && searchList.length > 0"
            class="search-popover"
            :style="{ left: (searchInputIndex + 1) * 177 + 'px' }"
          >
            <div
              v-for="(item, index) in searchList"
              :key="index"
              @mousedown="onClickSearchItem(item)"
            >
              <div style="padding: 5px 0">
                {{
                  index == 0 ? '在筛选条件中搜索 "' + item + '"' : item.cnName
                }}
              </div>
              <div
                v-if="index + 1 < searchList.length"
                style="width: 100%; height: 1px; background-color: #eee"
              ></div>
            </div>
          </div>
          <table
            class="second-table"
            style="table-layout: fixed; width: 100%; border-collapse: collapse"
          >
            <tbody class="compared-container-content">
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>录取概率</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data" v-if="item.code">
                    <div class="txt">
                      {{ acceptanceRateListFilter(item.code)?.chance || '-' }}
                      <span
                        class="txt2"
                        v-if="acceptanceRateListFilter(item.code)?.chance"
                        >%</span
                      >
                    </div>
                  </div>
                </td>
              </tr>

              <tr>
                <th style="border-right: 0">
                  <div>
                    <span>2024招生计划</span>
                  </div>
                </th>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>招生人数</span>
                  </div>
                </td>
                <td
                  class="content-probability vertical-align-bottom"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data" v-if="item.code">
                    <span class="txt">
                      {{
                        acceptanceRateListFilter(item.code)?.totalPlanNum || '-'
                      }}
                      <span
                        class="txt2"
                        v-if="acceptanceRateListFilter(item.code)?.totalPlanNum"
                        >人</span
                      >
                    </span>
                    <div
                      class="bar"
                      :style="{
                        height:
                          (Number(
                            acceptanceRateListFilter(item.code)?.totalPlanNum ||
                              '',
                          ) /
                            Number(maxPlanNum)) *
                            100 +
                          'px',
                      }"
                    ></div>
                  </div>
                </td>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>院校（专业）组</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data" v-if="item.code">
                    <span class="txt">
                      {{ acceptanceRateListFilter(item.code)?.groupNum || '-' }}
                      <span
                        class="txt2"
                        v-if="acceptanceRateListFilter(item.code)?.groupNum"
                        >个</span
                      >
                    </span>
                  </div>
                </td>
              </tr>
              <tr>
                <th style="border-right: 0">
                  <div>
                    <span>2024分数线</span>
                  </div>
                </th>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>最低分区间</span>
                  </div>
                </td>
                <td
                  class="content-probability content-probability-score"
                  v-for="item in compareList"
                  :key="item"
                >
                  <div
                    class="top"
                    v-if="
                      item.code &&
                      scoreRange[scoreRange.length - 1] != scoreRange[0]
                    "
                  >
                    <div class="left-score">
                      <span>{{ scoreRange[scoreRange.length - 1] }}</span>
                      <span>{{
                        Math.round(
                          (Number(scoreRange[scoreRange.length - 1]) +
                            Number(scoreRange[0])) /
                            2,
                        )
                      }}</span>
                      <span>{{ scoreRange[0] }}</span>
                    </div>
                    <div class="content-probability-data min-score">
                      <div class="line"></div>
                      <div
                        v-for="(a, b) in acceptanceRateListFilter(item.code)
                          ?.list"
                        :key="b"
                      >
                        <div
                          class="dor"
                          :style="{
                            top:
                              ((Number(scoreRange[scoreRange.length - 1]) -
                                a.score) /
                                (Number(scoreRange[scoreRange.length - 1]) -
                                  Number(scoreRange[0]))) *
                                100 +
                              13 +
                              'px',
                          }"
                        ></div>
                      </div>
                    </div>
                  </div>
                  <div class="top" v-else-if="item.code">
                    <div class="left-score left-score-noScore">
                      <span>{{ scoreRange[0] }}</span>
                    </div>
                    <div
                      class="content-probability-data min-score min-score-noScore"
                    >
                      <div class="line"></div>
                      <div>
                        <div
                          class="dor"
                          :style="{
                            top: 23 + 'px',
                          }"
                        ></div>
                      </div>
                    </div>
                  </div>
                  <div class="down" v-if="item.code">
                    <span class="bottom-major">
                      专业/组{{
                        acceptanceRateListFilter(item.code)?.groupNum || 0
                      }}个
                    </span>
                    <span
                      class="min-score-range"
                      v-if="
                        acceptanceRateListFilter(item.code)?.minScore !=
                        acceptanceRateListFilter(item.code)?.maxScore
                      "
                    >
                      {{ acceptanceRateListFilter(item.code)?.minScore || '' }}
                      -
                      {{
                        acceptanceRateListFilter(item.code)?.maxScore || ''
                      }}分
                    </span>
                    <span v-else>
                      {{
                        acceptanceRateListFilter(item.code)?.maxScore || ''
                      }}分
                    </span>
                  </div>
                </td>
              </tr>
              <tr>
                <th style="border-right: 0">
                  <div>
                    <span>基础信息</span>
                  </div>
                </th>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>基本信息</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div>
                    <span
                      class="column txt2"
                      style="font-size: 14px; gap: 10px"
                      v-for="a in item.categories"
                      :key="a"
                    >
                      <span>{{ a || '-' }}</span>
                    </span>
                  </div>
                </td>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>院校特色</span>
                  </div>
                </td>
                <td
                  class="content-probability vertical-align-top"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="column txt2">
                    <span
                      style="font-size: 14px; gap: 10px"
                      v-for="a in item.features"
                      :key="a"
                    >
                      <span>{{ a || '-' }}</span>
                    </span>
                  </div>
                </td>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>所在地</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div>
                    <span class="column txt2">
                      <span>{{ item.provinceName }}</span>
                      <span>{{ item.cityName }} </span>
                    </span>
                  </div>
                </td>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>硕士点</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data">
                    <span class="txt" v-if="item.pointsOfShuo?.length > 1">
                      {{
                        item.pointsOfShuo.map((item) => item.number).join('/')
                      }}
                    </span>
                    <span class="txt" v-else-if="item.code">
                      {{
                        item.pointsOfShuo?.length
                          ? item.pointsOfShuo[0].number
                          : '-'
                      }}
                    </span>
                    <span v-else></span>
                  </div>
                </td>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>博士点</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data">
                    <span class="txt" v-if="item.pointsOfBo?.length > 1">
                      {{ item.pointsOfBo.map((item) => item.number).join('/') }}
                    </span>
                    <span class="txt" v-else-if="item.code">
                      {{ !!item.pointsOfBo ? item.pointsOfBo[0]?.number : '-' }}
                    </span>
                    <span v-else></span>
                  </div>
                </td>
              </tr>
              <tr>
                <th style="border-right: 0">
                  <div>
                    <span>院校排名</span>
                  </div>
                </th>
              </tr>
              <!-- <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>易度排名</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data">
                    <span class="txt">{{ item.ranking }}</span>
                  </div>
                </td>
              </tr> -->
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>校友会</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div
                    class="content-probability-data"
                    style="flex-direction: row"
                  >
                    <span class="txt">{{ item.rankingOfXYH }}</span>
                    <img
                      class="hot"
                      v-if="
                        minValue(compareList, 'rankingOfXYH') ==
                          item.rankingOfXYH && item.rankingOfXYH != 0
                      "
                      src="../../assets/images/hot.png"
                      alt=""
                    />
                  </div>
                </td>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>软科</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div
                    class="content-probability-data"
                    style="flex-direction: row"
                  >
                    <span class="txt">{{ item.rankingOfRK }}</span>
                    <img
                      class="hot"
                      v-if="
                        minValue(compareList, 'rankingOfRK') ==
                          item.rankingOfRK && item.rankingOfRK != 0
                      "
                      src="../../assets/images/hot.png"
                      alt=""
                    />
                  </div>
                </td>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>QS</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div
                    class="content-probability-data"
                    style="flex-direction: row"
                  >
                    <span class="txt">{{ item.rankingOfQS }}</span>
                    <img
                      class="hot"
                      v-if="
                        minValue(compareList, 'rankingOfQS') ==
                          item.rankingOfQS && item.rankingOfQS != 0
                      "
                      src="../../assets/images/hot.png"
                      alt=""
                    />
                  </div>
                </td>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>USNews</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div
                    class="content-probability-data"
                    style="flex-direction: row"
                  >
                    <span class="txt">{{ item.rankingOfUSNews }}</span>
                    <img
                      class="hot"
                      v-if="
                        minValue(compareList, 'rankingOfUSNews') ==
                          item.rankingOfUSNews && item.rankingOfUSNews != 0
                      "
                      src="../../assets/images/hot.png"
                      alt=""
                    />
                  </div>
                </td>
              </tr>
              <!-- <tr>
                <th style="border-right: 0">
                  <div>
                    <span>院校指数</span>
                  </div>
                </th>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>综合热度</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data" style="gap: 10px">
                    <span class="txt">10469</span>
                    <span class="txt2">第120位</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>填报指数</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data">
                    <span class="txt">1308</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>报录比</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data">
                    <span class="txt">37:1</span>
                  </div>
                </td>
              </tr> -->
              <tr>
                <th style="border-right: 0">
                  <div>
                    <span>特色专业</span>
                  </div>
                </th>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>国家级</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data">
                    <span class="txt" v-if="item.code">{{
                      item.featureMajor
                        ? JSON.parse(item.featureMajor).countries.length
                        : '-'
                    }}</span>
                    <span v-else></span>
                  </div>
                </td>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div>
                    <span>省级</span>
                  </div>
                </td>
                <td
                  class="content-probability"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data">
                    <span class="txt" v-if="item.code">{{
                      item.featureMajor
                        ? JSON.parse(item.featureMajor).provinces.length
                        : '-'
                    }}</span>
                    <span v-else></span>
                  </div>
                </td>
              </tr>

              <tr>
                <th style="border-right: 0">
                  <div>
                    <span>办学实力</span>
                  </div>
                </th>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div class="column">
                    <span>双一流学科</span>
                    <span class="txt3">第二轮</span>
                  </div>
                </td>
                <td
                  class="content-probability vertical-align-top"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data2">
                    <span
                      class="txt4"
                      v-if="
                        item.sylMajor &&
                        JSON.parse(item.sylMajor).sylSubjectsGroup &&
                        JSON.parse(item.sylMajor).sylSubjectsGroup.length
                      "
                    >
                      共{{
                        JSON.parse(item.sylMajor).sylSubjectsGroup[0].subjects
                          .length
                      }}个
                    </span>
                    <div
                      class="column txt5"
                      v-if="
                        item.sylMajor &&
                        !!JSON.parse(item.sylMajor).sylSubjectsGroup &&
                        !!JSON.parse(item.sylMajor).sylSubjectsGroup[0] &&
                        !!JSON.parse(item.sylMajor).sylSubjectsGroup[0].subjects
                      "
                    >
                      <span
                        v-for="(a, b) in JSON.parse(item.sylMajor)
                          .sylSubjectsGroup[0].subjects"
                        :key="b"
                        >{{ a.name }}</span
                      >
                    </div>
                    <span v-else-if="item.code" class="txt">-</span>
                    <span v-else></span>
                  </div>
                </td>
              </tr>
              <tr>
                <td width="136" class="common-left-content">
                  <div class="column">
                    <span>学科评估</span>
                    <span class="txt3">第四轮</span>
                  </div>
                </td>
                <td
                  class="content-probability vertical-align-top"
                  v-for="item in compareList"
                  :key="item.code"
                >
                  <div class="content-probability-data2">
                    <span
                      class="txt4"
                      v-if="
                        item.subjectEvaluates && item.subjectEvaluates.length
                      "
                    >
                      共{{ item.subjectEvaluatesLength }}个
                    </span>

                    <div class="column txt5" v-if="!!item.subjectEvaluates">
                      <span
                        v-for="(a, b) in item.subjectEvaluates"
                        :key="b"
                        class="txt6"
                      >
                        <span class="top">
                          <span class="pingji">{{ a.level }}</span>
                          <span class="num">{{ a.name.length }}</span>
                        </span>
                        <span class="name" v-for="(c, i) in a.name" :key="i">
                          {{ c }}
                        </span>
                      </span>
                    </div>
                    <span v-else-if="item.code" class="txt">-</span>
                    <span v-else></span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <p class="tips">* 以上信息仅供参考，详细数据以院校官方公布信息为准</p>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { Plus } from '@element-plus/icons-vue';
import { searchSchool } from '@/api/volunteer/volunteer.js';
import { acceptanceRate } from '@/api/collegeCompare/collegeCompare.js';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();
const userInfo = ref(store.getters.user.userInfo);
const searchList = ref([]); // 模糊搜索数据源
const compareList = ref([]);
const isShowSearchPop = ref(false); // 是否显示搜索pop
const searchKey = ref(''); // 搜索关键词
const searchInputIndex = ref(0); // 搜索输入框下标

const scoreRange = ref([]); // 分数区间
const acceptanceRateList = ref([]); // 录取率列表
const maxPlanNum = ref(0); // 最大计划招生数

// 搜索输入值改变
const searchKeyInput = (val, i) => {
  searchInputIndex.value = i;
  if (val.length >= 2) {
    searchSchool({
      search: val,
      pageSize: 1000,
    }).then((res) => {
      let data = res.data.data;
      searchList.value = data;

      searchList.value.splice(0, 0, searchKey.value);
      isShowSearchPop.value = true;
    });
  } else {
    searchList.value = [];
    isShowSearchPop.value = false;
  }
};

// 筛选接口返回的院校数据
const acceptanceRateListFilter = (val) => {
  return acceptanceRateList.value.filter((a) => a.collegeCode == val)[0] || {};
};

// 点击添加院校
const handleAddCollege = (val) => {
  compareList.value[val].isSearch = true;
};

// 点击搜索项-添加对比院校
const onClickSearchItem = (item) => {
  // 判断是否有重复的值
  const arr = compareList.value.some(
    (existingItem) => existingItem.code === item.code,
  )
    ? []
    : [item];
  if (arr.length > 0) {
    // 存值
    localStorage.setItem(
      'compareList',
      JSON.stringify(compareList.value.filter((item) => item.code).concat(arr)),
    );
    window.location.reload();
  } else {
    ElMessage({
      message: '该学校已存在',
      type: 'warning',
    });
  }
};

// 删除对比院校
const deleteItem = (code) => {
  localStorage.setItem(
    'compareList',
    JSON.stringify(compareList.value.filter((item) => item.code != code)),
  );
  window.location.reload();
};

// 比较最小值
const minValue = (arr, key) =>
  Math.min(
    ...arr
      .filter((item) => item[key] != null && item[key] != '')
      .map((item) => item[key]),
  );

// 获取对比数据
const getAcceptanceRate = () => {
  const data = {
    collegeCode: compareList.value
      .map((item) => item.code)
      .filter((item) => !!item),
  };
  acceptanceRate(data)
    .then((res) => {
      acceptanceRateList.value = res.data.data;
      maxPlanNum.value = Math.max(
        ...acceptanceRateList.value.map((item) => item.totalPlanNum),
      );
      for (const v of acceptanceRateList.value) {
        v.maxScore = Math.max(...v.list.map((item) => item.score));
        v.minScore = Math.min(...v.list.map((item) => item.score));
        for (const vv of v.list) {
          scoreRange.value.push(vv.score);
        }
      }
      scoreRange.value = [...scoreRange.value].sort((a, b) => a - b);

      compareList.value.map((item) => {
        acceptanceRateList.value.filter((v) => {
          if (v.collegeCode == item.code) {
            item.sylMajor = v.schoolInfo.sylMajor;
            item.featureMajor = v.schoolInfo.featureMajor;
            item.subjectEvaluates = groupByLevel(
              JSON.parse(v.schoolSubjectEvaluate.subjectEvaluates),
            );
            item.subjectEvaluatesLength = JSON.parse(
              v.schoolSubjectEvaluate.subjectEvaluates,
            ).length;
            console.log('item.subjectEvaluates:', item.subjectEvaluates);
          }
        });
      });
    })
    .catch((err) => {
      console.log('err1:', err);
    });
  while (compareList.value.length < 6) {
    compareList.value.push({});
  }
};

// JavaScript方法：按 `level` 分组并只保留 `name`
const groupByLevel = (data) => {
  const levelOrder = [
    'A+',
    'A',
    'A-',
    'B+',
    'B',
    'B-',
    'C+',
    'C',
    'C-',
    'D+',
    'D',
    'D-',
    'E+',
    'E',
    'E-',
    'F+',
    'F',
    'F-',
  ];
  // 按level分组
  const grouped = {};

  // 遍历原始数据进行分组
  data.forEach((item) => {
    if (!grouped[item.level]) {
      grouped[item.level] = [];
    }
    grouped[item.level].push(item.name);
  });

  // 按照levelOrder排序并构建新的数组
  const result = levelOrder
    .map((level) => {
      if (grouped[level]) {
        return { level: level, name: grouped[level] };
      }
      return null; // 如果没有该level，则返回null
    })
    .filter((item) => item !== null); // 过滤掉null项

  return result;
};

onMounted(() => {
  // 判断是否有成绩
  if (!userInfo.value.score || !userInfo.value.course) {
    ElMessage({
      message: '请先设置成绩和科目',
      type: 'warning',
      time: 3000,
    });
    router.push('/home');
    return;
  }

  if (!compareList.value) {
    compareList.value = [];
  } else {
    compareList.value = JSON.parse(localStorage.getItem('compareList'));
  }
  console.log('compareList.value:', compareList.value);

  getAcceptanceRate();
});
</script>

<style lang="scss" scoped>
.td-item-top {
  border-right: 1px solid #e4e4e4;
  padding: 10px;
  position: relative;
  .del {
    width: 20px;
    height: 22px;
    position: absolute;
    right: 0px;
    top: 0px;
    background: #fff7e8;
    border-radius: 0 0 0 10px;
    display: none;
  }
}
.td-item-top:hover {
  .del {
    display: block;
  }
}
.search-popover {
  position: absolute;
  top: 100px;
  // left: 15px;
  width: 240px;
  height: 200px;
  overflow: auto;
  background-color: white;
  z-index: 999;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #c9cdd4;
  padding: 0 10px;
  font-size: 14px;
}
.column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.txt {
  font-size: 20px;
  color: #1d2129;
  line-height: 20px;
  font-weight: bold;
}
.txt2 {
  font-size: 12px;
  color: #1d2129;
  line-height: 12px;
}
.txt3 {
  font-size: 12px;
  color: #333;
}
.txt4 {
  font-size: 12px;
  color: #86909c;
  line-height: 16px;
  margin-bottom: 12px;
  text-align: left;
}
.txt5 {
  font-size: 14px;
  color: #86909c;
  line-height: 20px;
}
.txt6 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  .top {
    display: flex;
    flex-direction: row;
    .pingji {
      font-size: 14px;
      color: #1d2129;
      margin-right: 10px;
    }
  }
}
.up {
  margin-bottom: 4px;
  .up-title {
    font-size: 14px;
    color: #1d2129;
    line-height: 20px;
  }
  .up-num {
    margin-left: 10px;
    font-size: 14px;
    color: #86909c;
    line-height: 14px;
  }
}
.vertical-align-bottom {
  vertical-align: bottom;
}
.vertical-align-top {
  vertical-align: top;
}
.content-probability-data2 {
  display: flex;
  flex-direction: column;
}
.content-probability-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .bar {
    margin-top: 4px;
    width: 40px;
    background: linear-gradient(
      180deg,
      rgba(140, 178, 255, 0.7) 3%,
      rgba(217, 229, 255, 0.3) 99%
    );
    border-radius: 4px 4px 0 0;
  }
  .hot {
    width: 14px;
    height: 14px;
  }
}
.content-probability-score {
  position: relative;
  .top {
    .left-score {
      position: absolute;
      top: 10px;
      left: 0;
      font-size: 12px;
      color: #86909c;
      line-height: 12px;
      display: flex;
      flex-direction: column;
      height: 110px;
      justify-content: space-between;
      margin: 0 20px;
    }
    .left-score-noScore {
      top: 20px;
    }
    .min-score {
      margin-left: 20%;
      width: 70%;
      height: 100px;
      border-top: 1px dashed #d8d8d8;
      border-bottom: 1px dashed #d8d8d8;
      .line {
        width: 100%;
        border-top: 1px dashed #d8d8d8;
      }
      .dor {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 4px;
        height: 4px;
        background: #ff7d00;
        transform: rotate(45deg);
      }
    }
    .min-score-noScore {
      height: 20px;
      border-top: 0;
      border-bottom: 0;
    }
  }
  .down {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    .bottom-major {
      font-size: 12px;
      color: #86909c;
      line-height: 16px;
    }
    .min-score-range {
      font-size: 14px;
      color: #1d2129;
      line-height: 20px;
    }
  }
}

#collegeCompare {
  //   margin-top: 30px;
  margin-bottom: 150px;
  .comopare-title {
    height: 28px;
    margin: 30px 0;
    .title-bar {
      width: 4px;
      height: 22px;
      background: red;

      margin-right: 10px;
      font-weight: 500;
    }
  }
}

.second-table,
.second-table tr th,
.second-table tr td {
  // border-bottom: 1px solid #e4e4e4;
  // border-left: 1px solid #e4e4e4;
  // border-right: 1px solid #e4e4e4;
  border: 1px solid #e4e4e4;
  padding: 15px;
  font-size: 14px;
}
.first-table,
.first-table tr th,
.first-table tr td {
  border: 1px solid #e4e4e4;
  border-bottom: 0;
}
table {
  min-height: 25px;
  line-height: 25px;
  text-align: center;
  border-collapse: collapse;
}
.college-compared-header-contaienr {
  border-top: 1px solid #e4e4e4;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
.tips {
  font-size: 12px;
  margin: 13px 0;
  font-weight: 400;
  color: #86909c;
  line-height: 20px;
}
.first-table {
  position: sticky;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 9;
}
</style>
